﻿<style>
    ul {
        padding: 0;
        margin: 0;
    }

    li, a {
        list-style: none;
        color: #787878;
    }

    .nav1 div {
        width: 50px;
        height: 56px;
        float: left;
        position: relative;
        text-align: center;
        cursor: pointer;
    }

        .nav1 div:hover span {
            width: 50px;
        }

    [v-cloak] {
        display: none;
    }
</style>
<div id="top" style="width:100%;height:100%;" v-cloak>
    <div style="display:block;height:100%;" class="el-background">
        <div style=" float: left; padding-left: 20px;">
            {{currentPage}}
        </div>
        <div style="float:right;font-size:22px;width:270px;">
            <ul class="nav1">
                @*<li>
                    <div>
                        <el-dropdown trigger="click" v-on:command="handleCommand">
                            <font class="el-dropdown-link">
                                <i class="el-icon-magic-stick" style="font-size:20px;"></i>
                            </font>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="theme-white">暮光白</el-dropdown-item>
                                <el-dropdown-item command="theme-black">鎏金黑</el-dropdown-item>
                                <el-dropdown-item command="theme-green">青柠绿</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span></span>
                    </div>
                </li>*@
                <li>
                    <div>
                        <i class="el-icon-user"></i>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="el-icon-full-screen"></i>
                        <span></span>
                    </div>
                </li>
                <li>
                    <div v-on:click="SignOut">
                        <i class="el-icon-switch-button"></i>
                        <span></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#top',
        data() {
            return {
                currentPage: '后台管理',
            }
        },
        mounted() {
            this.currentPage = document.title
        },
        methods: {
            SignOut() {
                this.$confirm('是否退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href = '/Login/Index'
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },//退出
            handleCommand(command) {
                Cookies.set('theme', command, 365);
                location.reload();
            },//保存主题信息
        }
    })

</script>